<template>
	<view class="staging">
		<view :class="['staging-item',index>3?'mt':'']" v-for="(item,index) in stagingList" :key="index"
			@tap="toPage(item.url)">
			<image :src="item.img" mode=""></image>
			<view class="desc">{{item.label}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			// Define arrays inside data function where this.$mConfig is accessible
			const company = [{
				label: '中介管理',
				img: this.$mConfig.imageUrl + '/images/zjgl.png',
				url: '/pages/staging/intermediaryMange/intermediary'
			}, {
				label: '派遣员工管理',
				img: this.$mConfig.imageUrl + '/images/pqyg.png',
				url: '/pages/staging/staffManagement/staffManagement?type=1'
			}, {
				label: '代招员工管理',
				img: this.$mConfig.imageUrl + '/images/dzyg.png',
				url: '/pages/staging/staffManagement/staffManagement?type=2'
			}, {
				label: '直招员工管理',
				img: this.$mConfig.imageUrl + '/images/zzyg.png',
				url: '/pages/staging/employeeList/employeeList?type=3'
			}, {
				label: '考勤管理',
				img: this.$mConfig.imageUrl + '/images/kqdk.png',
				url: '/pages/staging/attendanceManagement/attendanceManagement'
			}, {
				label: '借支管理',
				img: this.$mConfig.imageUrl + '/images/jzgl.png',
				url: '/pages/staging/loanManagement/loanManagement'
			}, {
				label: '工资结算管理',
				img: this.$mConfig.imageUrl + '/images/gzjs.png',
				url: '/pages/staging/settlement/settlement'
			}, {
				label: '统计报表',
				img: this.$mConfig.imageUrl + '/images/tj.png',
				url: '/pages/staging/statisticalReport/statisticalReport'
			}, {
				label: '中介工资及奖励',
				img: this.$mConfig.imageUrl + '/images/zjgzjjl.png',
				url: '/pages/staging/salaryRewards/salaryRewards'
			}, {
				label: '返费结算管理',
				img: this.$mConfig.imageUrl + '/images/ffjsgl.png',
				url: '/pages/staging/refundFee/refundFee'
			}, {
				label: '离职违规员工管理',
				img: this.$mConfig.imageUrl + '/images/lzwgy.png',
				url: '/pages/staging/resignedEmployee/resignedEmployee'
			}];
			
			const intermediary = [{
				label: '公司管理',
				img: this.$mConfig.imageUrl + '/images/gsgl.png',
				url: '/pages/staging/'
			}, {
				label: '派遣员工管理',
				img: this.$mConfig.imageUrl + '/images/pqyg.png',
				url: '/pages/staging/staffManagement/staffManagement?type=1'
			}, {
				label: '考勤管理',
				img: this.$mConfig.imageUrl + '/images/kqdk.png',
				url: '/pages/staging/attendanceManagement/attendanceManagement'
			}, {
				label: '借支管理',
				img: this.$mConfig.imageUrl + '/images/jzgl.png',
				url: '/pages/staging/loanManagement/loanManagement'
			}, {
				label: '工资结算管理',
				img: this.$mConfig.imageUrl + '/images/gzjs.png',
				url: '/pages/staging/settlement/settlement'
			}, {
				label: '统计报表',
				img: this.$mConfig.imageUrl + '/images/tj.png',
				url: '/pages/staging/statisticalReport/statisticalReport'
			}, {
				label: '公司工资及奖励',
				img: this.$mConfig.imageUrl + '/images/gzjl.png',
				url: '/pages/staging/salaryRewards/salaryRewards'
			}, {
				label: '派遣职位',
				img: this.$mConfig.imageUrl + '/images/pqzw.png',
				url: '/pages/staging/'
			}, {
				label: '代招职位',
				img: this.$mConfig.imageUrl + '/images/dzzw.png',
				url: '/pages/staging/'
			}, {
				label: '代招员工管理',
				img: this.$mConfig.imageUrl + '/images/dzyg.png',
				url: '/pages/staging/staffManagement/staffManagement?type=2'
			}, {
				label: '直招员工管理',
				img: this.$mConfig.imageUrl + '/images/zzyg.png',
				url: '/pages/staging/staffManagement/staffManagement?type=3'
			}, {
				label: '返费结算管理',
				img: this.$mConfig.imageUrl + '/images/ffjsgl.png',
				url: '/pages/staging/refundFee/refundFee'
			}, {
				label: '离职管理',
				img: this.$mConfig.imageUrl + '/images/lzwgy.png',
				url: '/pages/staging/resignedEmployee/resignedEmployee'
			}];
			
			return {
				stagingList: company  // Initialize with company by default
			};
		},
		onShow() {
			// No need to reassign, already initialized in data
		},
		methods: {
			toPage(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.staging {
		display: flex;
		margin: 0 32rpx;
		flex-wrap: wrap;

		.staging-item {
			margin-top: 37rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 25%;

			image {
				width: 120rpx;
				height: 120rpx;
			}

			.desc {
				margin-top: 29rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #3B4552;
				width: 94%;
				height: 40rpx;
				text-align: center;
			}
		}

		.mt {
			margin-top: 50rpx;
		}


	}
</style>